<template>
    <div class="container">
        <div id="question" @click="edit">
            <div class="tittle"><span id="bixuan">* </span>{{tittle}}</div>
            <br/>
            <el-radio-group v-model="radio" class="option">
                <el-radio :label="1">. {{option[0]}}</el-radio><br>
                <el-radio :label="2" style="margin-top: 15px">. {{option[1]}}<div style="margin-top: 15px"></div></el-radio><br>
                <el-radio :label="3" id="option3">. {{option[2]}}<div style="margin-top: 15px"></div></el-radio>
                <el-radio :label="4" id="option4">. {{option[3]}}<div style="margin-top: 15px"></div></el-radio>
            </el-radio-group>
        </div>
        <el-divider/>
        <div id="set">
        <div style="margin-top: 10px; font-weight: bold"><i class="el-icon-s-tools"></i> 标题设置：</div>
        <el-input 
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            v-model="tittle" 
            placeholder="请输入标题"
            style="margin-top: 10px; width: 400px">
        </el-input>
        <br>
        <el-checkbox v-model="checked" style="margin-top: 10px">必选</el-checkbox>
        <div style="padding-top: 10px; font-weight: bold"><i class="el-icon-s-tools"></i> 选项设置：</div>
        <el-input v-model="option[0]" size="small" placeholder="请输入选项" autosize class="optionSet"><template slot="prepend">1</template></el-input>
        <el-input v-model="option[1]" size="small" placeholder="请输入选项" autosize class="optionSet"><template slot="prepend">2</template></el-input>
        <div id="optionSet3" style="display: none">
            <el-input v-model="option[2]" size="small" placeholder="请输入选项" autosize class="optionSet"><template slot="prepend">3</template></el-input>
        </div>
        <div id="optionSet4" style="display: none">
            <el-input v-model="option[3]" size="small" placeholder="请输入选项" autosize class="optionSet"><template slot="prepend">4</template></el-input>
        </div>
        <i class="el-icon-circle-plus-outline" id="addOption" @click="addOption"></i>
        <i class="el-icon-remove-outline" id="delOption" @click="delOption"></i>
        </div>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
export default ({
    data() {
        return {
            tittle: '标题',
            option: ['选项1', '选项2', '选项3', '选项4'],
            radio: '1',
            checked: false,
        }
    },
    methods: {
        sendMsg() {
            let question = {};
            question.tittle = this.tittle;
            question.option = this.option;
            question.checked = this.checked;
            this.$emit('getSingleChoiceMsg', question);
        },
        edit() {
            let e = document.getElementById('set');
            let q = document.getElementById('question');
            console.log(q);
            if (e.style.display == 'none') {
                e.style.display = 'block';
                q.style.borderWidth = '2px';
            } else {
                e.style.display = 'none';
                q.style.borderWidth = '0px';
            }
        },
        addOption() {
            let opt3 = document.getElementById('option3');
            let opt4 = document.getElementById('option4');
            let optset3 = document.getElementById('optionSet3');
            let optset4 = document.getElementById('optionSet4');
            if (optset3.style.display == 'inline' && optset4.style.display == 'none') {
                opt4.style.display = 'inline';
                optset4.style.display = 'inline';
            } else if (optset3.style.display == 'none') {
                opt3.style.display = 'inline';
                optset3.style.display = 'inline';
            } else {
                this.$message({
                    message: '单选题不能超过四个选项',
                    type: 'warning'
                });
            }
        },
        delOption() {
            let opt3 = document.getElementById('option3');
            let opt4 = document.getElementById('option4');
            let optset3 = document.getElementById('optionSet3');
            let optset4 = document.getElementById('optionSet4');
            if (opt3.style.display == 'inline' && opt4.style.display == 'inline') {
                opt4.style.display = 'none';
                optset4.style.display = 'none';
            } else if (opt3.style.display == 'inline') {
                opt3.style.display = 'none';
                optset3.style.display = 'none';
            } else {
                this.$message({
                    message: '单选题不能少于两个选项',
                    type: 'warning'
                });
            }
        }
    },
    watch: {
        checked(val, oldval) {
            let e = document.getElementById('bixuan');
            if (val == true) {
                e.style.display = 'inline';
            } else {
                e.style.display = 'none';
            }
        }
    }
})
</script>

<style scoped>
.container {
    width: 400px;
    justify-content: space-between;
    font-size: 15px;
    text-align: left;
    margin-top: 20px;
}
#question {
    border-style: dashed;
    border-width: 2px;
    padding: 10px 0 0 10px;
    border-radius: 5px;
    display: block;
    cursor: pointer;
}
.tittle {
    font-weight: bold;
    font-size: 16px;
}
.option {
    margin-top: 10px;
}
#option3, #option4 {
    display: none;
}
.optionSet {
    margin-top: 10px;
}
#addOption {
    margin-top: 10px;
    font-size: 25px;
    cursor: pointer;
}
#delOption {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 25px;
    cursor: pointer;
}
#bixuan {
    display: none;
    color: red;
}
</style>
